<template>
    <a-modal
        :title="title"
        :width="width"
        :visible="visible1"
        :confirmLoading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="关闭"
        wrapClassName="ant-modal-cust-warp"
        style="top: 5%; height: 100%; overflow-y: hidden">
    <template slot="footer">
      <a-button key="backs" v-if="isReadOnly" @click="handleCancel"> 关闭 </a-button>
    </template>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form :form="form">
      <!-- <a-form layout="inline" @keyup.enter.native="searchQuery" :form="form"> -->
          <a-row class="form-row" :gutter="24">
            <a-col :lg="6" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户">
                <a-select placeholder="选择客户" v-decorator="[ 'organId', validatorRules.organId ]" :dropdownMatchSelectWidth="false">
                  <a-select-option v-for="(item,index) in cusList" :key="index" :value="item.id">
                    {{ item.supplier }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据日期">
                <j-date v-decorator="['operTime']" :show-time="true"/>
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单据编号">
                <a-input placeholder="请输入单据编号" v-decorator.trim="[ 'number' ]" :readOnly="true"/>
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="12" :sm="24">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关联订单">
                <a-input-search placeholder="请选择关联订单" v-decorator="[ 'linkNumber' ]"  :readOnly="true"/>
              </a-form-item>
            </a-col>
          </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource1"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">
        <!-- <span slot="action" slot-scope="text, record">
          <a @click="myHandleDetail(record, '销售出库')">查看</a>
        </span> -->
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <!-- <sale-out-modal ref="modalForm" @ok="modalFormOk"></sale-out-modal> -->
    <!-- <bill-detail ref="modalDetail"></bill-detail> -->
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { BillListMixin } from '../../bill/mixins/BillListMixin'
  import JDate from '@/components/jeecg/JDate'
  import { getDetailList }  from '@/api/api'
  
  import Vue from 'vue'
  export default {
    name: "SaleOutModal2",
    mixins:[JeecgListMixin,BillListMixin],
    props: ['idone','visible1','headerIds'],
    components: {
      JDate
    },
    data () {
      return {
        dataSource1:[],
        cusList:[],
        engineeringPointId:'',
        width:'80%',
        isReadOnly: false,
        confirmLoading: false,
        title:"详情",
        selectMaterialRows:[],
        loading: false,
        form: this.$form.createForm(this),
        // 查询条件
        //  ipagination: {
        //   current: 1,
        //   pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        // },
        queryParam: {
          number: "",
          searchMaterial: "",
          type: "出库",
          subType: "销售",
          roleType: Vue.ls.get('roleType')
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        // 表单校验
        validatorRules:{
          operTime:{
            rules: [
              { required: true, message: '请输入单据日期!' }
            ]
          },
          organId:{
            rules: [
              { required: true, message: '请选择客户!' }
            ]
          },
          accountId:{
            rules: [
              { required: true, message: '请选择结算账户!' }
            ]
          }
        },
        // 表头
        columns: [
            { title: '仓库名称', dataIndex: 'depotId', width: 90, },
            { title: '条码', dataIndex: 'barCode', width: 70, },
            { title: '名称', dataIndex: 'name', width: 70 },
            { title: '规格', dataIndex: 'standard', width:70 },
            { title: '型号', dataIndex: 'model', width: 70},
            { title: '扩展信息', dataIndex: 'materialOther', width:90 },
            { title: '库存', dataIndex: 'stock', width: 70  },
            { title: '单位', dataIndex: 'unit', width: 70 },
            { title: '数量', dataIndex: 'operNumber', width:70 },
            { title: '单价', dataIndex: 'unitPrice', width: 70},
            { title: '含税单价', dataIndex: 'taxUnitPrice', width: 90},
            { title: '金额', dataIndex: 'allPrice', width: 80},
            { title: '税率(%)', dataIndex: 'taxRate', width: 80},
            { title: '税额', dataIndex: 'taxMoney', width: 80},
            { title: '价税合计', dataIndex: 'taxLastMoney', width: 90},
            { title: '零售单价', dataIndex: 'commodityDecimal', width: 90},
            { title: '零售含税单价', dataIndex: 'taxRateCommodityDecimal', width:100},
            { title: '零售金额', dataIndex: 'commodityPrice', width: 90},
            { title: '零售税率(%)', dataIndex: 'taxRateCommodity', width: 90 },
            { title: '零售税额', dataIndex: 'taxRateCommodityMoney', width: 90 },
            { title: '零售价税合计', dataIndex: 'commodityDecimalTotal', width: 90},
            { title: '备注', dataIndex: 'remark', width: 50,}
        ],
        url: {
          list: "/depotHead/list",
          delete: "/depotHead/delete",
           detailList: '/depotItem/getDetailList'
        }
      }
    },
    computed: {

    },
   mounted() {
      console.log(this.headerIds,666)
      // this.manageList()
      this.tableList()
    
   },
    methods: {
        tableList(){
            getDetailList({
                headerId:this.headerIds,
                mpList:'制造商,自定义1,自定义2,自定义3',
            }).then((res) =>{
                if(res.code == 200){
                    this.dataSource1 = res.data.rows
                    this.ipagination.total = res.data.total
                }
            })
        },
        handleTableChange(pagination, filters, sorter) {
                //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
                    }
                this.ipagination = pagination;
                this.loadData();
        },
        // init(){
        // this.visible = true
        // },
        close () {
            this.$emit('close');
            // this.visibles = false;
        },
        handleOk () {
             this.$emit('guanb')
        },
      handleCancel () {
        // this.close()
         this.$emit('guan')
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>